<template>
  <a-drawer
    title="数据权限规则"
    :width="drawerWidth"
    @close="onClose"
    :visible="visible">

    <!-- 抽屉内容的border -->
    <div class="table-page-search-wrapper">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="8" :sm="8">
            <a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="24" :sm="24">
            <a-button style="margin-bottom: 16px" @click="selectDataRule" type="primary" icon="plus">添加已有规则</a-button>
            <a-button style="margin-bottom: 16px;margin-left:10px" @click="addPermissionRule" type="primary" icon="plus" >添加规则</a-button>
          </a-col>
        </a-row>
      </a-form>

      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">
            <a-icon type="edit"/>编辑
          </a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => doDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <sys-data-rule-modal @ok="modalFormOk" ref="modalForm" @permDataRuleFinish="loadData"></sys-data-rule-modal>
    <select-data-rule-modal ref="selectModalForm" @selectFinished="selectOK"></select-data-rule-modal>

  </a-drawer>
</template>
<script>
import { api, getPermissionRuleList, queryPermissionRule, addPermissionBySelect } from '../service'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import SelectDataRuleModal from './SelectDataRuleModal.vue'
  import SysDataRuleModal from '../../rule/modules/SysDataRuleModal.vue'

  const columns = [
    {
      title: '规则名称',
      dataIndex: 'ruleName',
      key: 'ruleName'
    },
    {
      title: '规则字段',
      dataIndex: 'ruleColumn',
      key: 'ruleColumn'
    },
    {
      title: '规则值',
      dataIndex: 'ruleValue',
      key: 'ruleValue'
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
      align: 'center'
    }
  ]
  export default {
    name: 'PermissionDataRuleList',
    mixins: [JeecgListMixin],
    components: {
      SysDataRuleModal,
      SelectDataRuleModal
    },
    data() {
      return {
        queryParam: {},
        drawerWidth: 650,
        columns: columns,
        permId: '',
        visible: false,
        form: this.$form.createForm(this),
        loading: false,
        url: {
          list: api.permRuleList,
          delete: ''
        }
      }
    },
    created() {
      this.resetScreenSize()
    },
    methods: {
      loadData() {
        if (!this.permId) {
          return
        }
        let that = this
        this.dataSource = []
        var params = this.getQueryParams() // 查询条件
        getPermissionRuleList(params).then((res) => {
          if (res.success) {
            that.dataSource = res.result
          }
        })
      },
      edit(record) {
        if (record.id) {
          this.visible = true
          this.permId = record.id
        }
        this.queryParam = {}
        this.queryParam.permissionId = record.id
        this.visible = true
        this.loadData()
        this.resetScreenSize()
      },
      addPermissionRule() {
        this.$refs.modalForm.add(this.permId)
        this.$refs.modalForm.title = '新增'
      },
      searchQuery() {
        var params = this.getQueryParams();
        params.permissionId = this.permId;
        queryPermissionRule(params).then((res) => {
          if (res.success) {
            this.dataSource = res.result
          }
        })
      },
      searchReset() {
        this.queryParam = {}
        this.queryParam.permissionId = this.permId
        this.loadData(1);
      },
      onClose() {
        this.visible = false
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 650
        }
      },
      getRowClassname(record) {
        if (record.status !== 1) {
          return 'data-rule-invalid'
        }
      },
      // 选择已有数据规则
      selectDataRule() {
        this.$refs.selectModalForm.visible = true;
      },
      doDelete: function (id) {
        this.url.delete = api.deletePermRule(id);
        this.handleDelete(id);
      },
      //
      selectOK(data) {
        let params = {};
        params.permissionId = this.permId;
        params.ruleIdList = [];
        for (var a = 0; a < data.length; a++) {
          params.ruleIdList.push(data[a]);
        }
        addPermissionBySelect(params).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
          } else {
            this.$message.warning(res.message);
          }
        })
      }
    }
  }
</script>

<style>
  .data-rule-invalid{
    background: #f4f4f4;
    color: #bababa;
  }
</style>
